@charset "utf-8";
/*
* header
*/

$color-01:#171717;
$color-02:#515151;
$color-03:#909090;
$color-04:#c1c1c1;//(输入框边框颜色)
$color-05:#eeeeee;//(背景色)
$color-06:#499af5;
$color-07:#ffb30e;
$color-08:#e43f3f;

$color-ffffff:#ffffff;
$color-a0a0a0:#a0a0a0;
$color-d2d2d2:#d2d2d2;
$color-f8f8f8:#f8f8f8;
$color-bfbfbf:#bfbfbf;
$color-aaaaaa:#aaaaaa;
$color-9a9a9a:#9a9a9a;
$color-e5e5e5:#e5e5e5;
$color-acacac:#acacac;
$color-fb4444:#fb4444;
$color-212121:#212121;
$color-90908f:#90908f;
$color-52C1F5:#52C1F5;
$color-F86767:#F86767;
$color-b4b4b4:#b4b4b4;
$color-d9d9d9:#d9d9d9;
$color-2b2b2b:#2b2b2b;

.extend-aline{
    &:hover{
        text-decoration: underline;
    }
}

.extend-box-shadow{
    background: $color-ffffff;
    box-shadow: 0 0 5px rgba(81, 81, 81, 0.2);
}
//个人页面作品、需求、服务、关注、粉丝
#per-wall{
    width: 1000px;
    margin: 30px auto 35px auto;
    .per-wall-l{
        width: 280px;
        margin-right: 30px;
        float: left;
        padding-left:10px;
        padding-right: 10px;
        background: $color-ffffff;
        .per-uimg{
            position: relative;
            float: left;
            width: 100px;
            height: 105px;
            .per-uimg-src{
                position: absolute;
                top:-17px;
                left: 0px;
                width: 100%;
                height: 100%;
                z-index: 1;
                cursor: pointer;
                img{
                    border-radius: 50%;
                }
                .per-uimg-edit{
                    display: none;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background: rgba(255,255,255,0.5);
                    a{
                        width: 100%;
                        height: 100%;
                        display: block;
                        &:after{
                            background: url("../../../images/pc/icon/icon-per-edit.png");
                            height: 43px;
                            width: 43px;
                            content: "";
                            position: absolute;
                            top:50%;
                            left: 50%;
                            margin: -25px 0 0 -22px;
                        }
                    }
                }
            }

            .per-uimg-src:hover{
                .per-uimg-edit{
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                }
            }
        }
        .per-uname{
            margin:15px 0 0 20px;
            width: 140px;
            float: left;
            p{
                margin: 0;
                color: $color-02;
                font-size: 14px;
                max-height: 36px;
                overflow: hidden;
                width: 140px;
                &.per-site{
                    font-size: 12px;
                    position: relative;
                    padding-left: 18px;
                    line-height: 25px;
                    &:before{
                        content: "";
                        position: absolute;
                        top:5px;
                        left: 0;
                        width: 12px;
                        height: 15px;
                        background: url("../../../images/pc/icon/icon-per-site.png") no-repeat;
                    }
                }
                &.per-auth{
                    font-size: 14px;
                    color: $color-07;
                    margin-bottom: 0;
                    padding-left: 18px;
                    position: relative;
                    &:before{
                        content: "";
                        position: absolute;
                        top:2px;
                        left: 0;
                        width: 14px;
                        height: 16px;
                        background: url("../../../images/pc/icon/icon-auth.png") no-repeat;
                    }
                }
                &.per-auth-grey{
                    color: $color-02;
                }
                a{
                    color: $color-02;
                    @extend .extend-aline;
                }
            }
        }
        .per-careBtn{
            p{
                width: 50%;
                float: left;
            }
        }
        .per-line{
            width: 100%;
            height: 1px;
            overflow: hidden;
            border-bottom: 1px solid $color-04;
        }
        .per-fund{
            margin-top: 24px;
            padding-bottom: 14px;
            font-size: 14px;
            p{
                clear: both;
                span{
                    &.per-fund-cz{
                        float: right;
                        a{
                            color: $color-07;
                            &:hover{
                                @extend .extend-aline;
                            }
                        }
                    }
                    &.per-fund-tx{
                        float: right;
                        a{
                            color: $color-02;
                            &:hover{
                                @extend .extend-aline;
                            }
                        }
                    }

                }
            }
        }
        .per-care{
            padding-top: 24px;
            padding-bottom: 14px;
            font-size: 12px;
            p{
                height: 16px;
                padding-bottom: 10px;
                a{
                    color: $color-02;
                }
            }
            span{
                float: left;
                margin-right: 10px;
                height: 16px;
                line-height: 16px;
                &.right{
                    float: right;
                }
            }
        }
        .per-appraise{
            padding-top: 24px;
            padding-bottom: 14px;
            font-size: 12px;
            p{
                height: 16px;
                padding-bottom: 10px;
            }
            span{
                float: left;
                margin-right: 10px;
                height: 16px;
                line-height: 16px;
                &.stars-yellow{
                    background: url("../../../images/pc/icon/icon-stars-yellow.png") no-repeat;
                    width: 16px;
                    height: 16px;
                    display: block;
                }
                &.stars-gray{
                    background: url("../../../images/pc/icon/icon-stars-gray.png") no-repeat;
                    width: 16px;
                    height: 16px;
                    display: block;
                }

            }

        }
        .per-identity{
            padding-top: 24px;
            font-size: 12px;
            padding-bottom: 20px;
            p{
                margin-bottom: 0;
                line-height: 25px;
                a{
                    color: $color-02;
                    &:hover{
                        color: $color-02;
                        @extend .extend-aline;
                    }
                }
                &.h25{
                    height: 20px;
                    overflow: hidden;
                }
                &.mb30{
                    margin-bottom: 15px;
                }
                &.h100{
                    max-height: 100px;
                    overflow: hidden;
                }
                &.per-identity-more{
                    text-align: right;
                    margin: 15px 0 0 0;
                    a{
                        color: $color-06;
                        &:hover{
                            color: $color-06;
                            @extend .extend-aline;
                        }
                    }
                }
            }
        }
    }
    .per-wall-r{
        width: 690px;
        float: left;
        .per-nav{
            ul{
                li{
                    float: left;
                    padding-right: 49px;
                    padding-left: 49px;
                    a{
                        color: $color-02;
                        line-height: 28px;
                        font-size: 20px;
                        text-align: center;
                        display: block;
                        span{
                            font-size: 16px;
                            margin-top: 9px;
                            display: inline-block;
                        }
                        &:hover{
                            color: $color-07;
                        }
                    }
                    &.per-nav-hover{
                        a{
                            color: $color-07;
                        }
                    }
                }
                padding-bottom: 13px;
                border-bottom: 1px solid $color-d2d2d2;
            }
        }
        .per-artnav{
            padding: 10px 0 10px 0;
            border-bottom: 1px solid $color-d2d2d2;
            ul{
                li{
                    float: left;
                    &.per-artnav-hover{
                        a{
                            color: $color-06;
                        }
                    }
                    a{
                        color: $color-02;
                        padding-right: 40px;
                        line-height: 25px;
                        height: 25px;
                        &:hover{
                            color: $color-06;
                        }
                    }
                }
            }
        }
        .per-art-img{
            padding-top: 25px;
            min-height: 660px;
            ul{
                li{
                    width: 160px;
                    height: 190px;
                    float: left;
                    margin-left: 10px;
                    margin-right: 2px;
                    margin-bottom: 25px;
                    &.per-art-imgDefault{
                        .per-art-imgTit{
                            font-size: 14px;
                            font-weight:normal;
                            padding: 0 20px;
                            margin-top: 15px;
                            overflow: hidden;
                            height: 20px;
                            line-height: 20px;
                            a{
                                color: $color-02;
                                @extend .extend-aline;
                                &:hover{
                                    cursor: pointer;
                                }
                            }
                        }
                        .per-art-picFile{
                            height: 100px;
                            width: 100%;
                            position: relative;
                            margin-top: 10px;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 20px;
                                top: 0;
                                width: 115px;
                                height: 100px;
                                background: url("../../../images/pc/icon/icon-per-file.png") no-repeat;
                            }
                            .file-num{
                                position: absolute;
                                width: 48px;
                                height: 23px;
                                line-height: 23px;
                                left: 75px;
                                top: 77px;
                                color: $color-ffffff;
                                font-weight: bolder;
                                font-size: 14px;
                                text-align: center;
                                background: rgba(81,81,81,0.8);
                                z-index: 10;
                                a{
                                    color: $color-ffffff;
                                }
                            }
                        }
                        .per-art-videoFile{
                            height: 92px;
                            width: 100%;
                            position: relative;
                            margin-top: 18px;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 28px;
                                top: 0;
                                width: 104px;
                                height: 83px;
                                background: url("../../../images/pc/icon/icon-per-video.png") no-repeat;
                            }
                        }
                        .per-art-audioFile{
                            height: 100px;
                            width: 100%;
                            position: relative;
                            margin-top: 10px;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 29px;
                                top: 0;
                                width: 102px;
                                height: 102px;
                                background: url("../../../images/pc/icon/icon-per-audio.png") no-repeat;
                            }
                        }
                        .per-art-textFile{
                            height: 100px;
                            width: 100%;
                            position: relative;
                            margin-top: 10px;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 43px;
                                top: 0;
                                width: 92px;
                                height: 98px;
                                background: url("../../../images/pc/icon/icon-per-text.png") no-repeat;
                            }
                        }
                        .per-art-imgEdit{
                            text-align: center;
                            padding-top: 10px;
                            font-size: 14px;
                            a{
                                height: 25px;
                                line-height: 25px;
                                color: $color-02;
                                @extend .extend-aline;
                            }
                        }
                    }
                    &.per-art-imgDefault:hover,&.per-art-imgHover{
                        @extend .extend-box-shadow;
                    }
                    &.per-art-imgAdd{
                        background: $color-ffffff;
                        border: 1px dashed $color-04;
                        .per-art-imgAdd-btn{
                            width: 50px;
                            height: 50px;
                            margin:55px auto 15px auto;
                            .add-btn{
                                position: relative;
                                &:before{
                                    content: "";
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                    background: url("../../../images/pc/icon/icon-per-addfile.png") no-repeat;
                                    width: 50px;
                                    height: 50px;
                                }
                            }

                        }
                        .per-art-imgAdd-tit{
                            text-align: center;
                            a{
                                color: $color-02;
                                @extend .extend-aline;
                            }
                        }
                    }
                }
            }
        }
        .per-req{
            min-height: 1085px;
            ul{
                width: 100%;
                li{
                    .tribe-share{
                        padding-right: 20px;
                        position: relative;
                        float: right;
                        padding-left: 20px;
                        margin: 10px 0 0 0;
                        width: auto;
                        a{
                            color: $color-02;
                            &:hover{
                                text-decoration: underline;
                            }
                        }
                        &:before{
                            position: absolute;
                            left: 0;
                            top: 2px;
                            content: "";
                            background: url("../../../images/pc/icon/icon-share.png");
                            width: 12px;
                            height: 16px;
                        }
                    }
                    .per-reqTit{
                        font-size: 16px;
                        color: $color-02;
                        overflow: hidden;
                        height: 25px;
                        line-height: 25px;
                        margin: 10px 0;
                        h1{
                            width: 410px;
                            float: left;
                            margin: 0 10px 0 0 ;
                            a{
                                color: $color-02;
                                @extend .extend-aline;
                            }
                        }
                        p{
                            float: right;
                            text-align: right;
                            width: 230px;
                            span{
                                color: $color-08;
                            }
                        }
                    }
                    .per-reqCon{
                        h3{
                            width: 100%;
                            font-size: 14px;
                            height: 25px;
                            line-height: 25px;
                            overflow: hidden;
                            font-family:"adobeheitistd regular","Microsoft YaHei";
                            color: $color-03;
                            a{
                                color: $color-03;
                            }
                        }
                        .per-reqInfo{
                            margin: 15px 0 20px 0;
                            font-size: 14px;
                            p{
                                float: left;
                                width: 160px;
                                position: relative;
                                padding-left: 25px;
                                &:before{
                                    content: "";
                                    position: absolute;
                                    top: 4px;
                                    left: 0;
                                    background: url("../../../images/pc/icon/icon-per-zjArt.png") no-repeat;
                                    width: 14px;
                                    height: 16px;
                                }
                            }
                            ul{
                                float: right;
                                width: 490px;
                                color: $color-03;
                                text-align: right;
                                li{
                                    display: inline-block;
                                    position: relative;
                                    margin-left: 25px;
                                    &.per-req-people{
                                        padding-left: 35px;
                                        &:before{
                                            content: "";
                                            position: absolute;
                                            top: 4px;
                                            left: 0;
                                            background: url("../../../images/pc/icon/icon-per-cy-1.png") no-repeat;
                                            width: 20px;
                                            height: 12px;
                                        }
                                    }
                                    &.per-req-bzj{
                                        padding-left: 23px;
                                        &:before{
                                            content: "";
                                            position: absolute;
                                            top: 4px;
                                            left: 0;
                                            background: url("../../../images/pc/icon/icon-per-bzj.png") no-repeat;
                                            width: 16px;
                                            height: 17px;
                                        }
                                    }
                                    &.per-req-time{
                                        padding-left: 22px;
                                        &:before{
                                            content: "";
                                            position: absolute;
                                            top: 4px;
                                            left: 0;
                                            background: url("../../../images/pc/icon/icon-per-time.png") no-repeat;
                                            width: 16px;
                                            height: 17px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .per-reqStatus{
                        margin: 0 0 10px 0;
                        .btn-yellow-50{
                            height: 40px;
                            line-height: 40px;
                            width: 100px;
                        }
                        p{
                            float: left;
                            width: 340px;
                            height: 50px;
                            line-height:50px;
                            color: $color-03;
                            margin-bottom: 0;
                            font-size: 14px;
                            .per-serBlue{
                                color: $color-06;
                            }
                            .per-serYellow{
                                color: $color-07;
                            }
                            .mr43{
                                margin-right: 43px;
                            }
                        }
                        ul{
                            float: right;
                            width: 310px;
                            text-align: right;
                            li{
                                display: inline-block;
                                line-height: 50px;
                                height: 50px;
                                &.per-reqStaEdit{
                                    font-size: 14px;
                                    padding:0 30px 0 10px;
                                    a{
                                        color: $color-02;
                                        &:hover{
                                            color: $color-08;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .per-reqLine{
                        height: 1px;
                        width: 100%;
                        border-bottom: 1px solid $color-d2d2d2;
                    }
                }
            }
        }


        //服务
        .tribe-req,.tribe-ser{
            margin-top: 10px;
            background: $color-ffffff;
            height: auto;
            min-height: 0;
            padding:20px 20px 10px 20px;
            position: relative;
            &:before{
                content: "";
                position: absolute;
                left: 0;
                top:0;
                width: 0;
                height: 0;
                border-top: 72px solid $color-2b2b2b;
                border-right: 85px solid transparent;
            }
            &:after{
                content: "";
                position: absolute;
                left: 5px;
                top: 15px;
                color: $color-07;
                font-size: 16px;
            }
        }
        .tribe-ser{
            &:after{
                content: "服务";
            }
        }
        .tribe-req{
            &:after{
                content: "需求";
            }
            .tribe-req-nav{
                ul{
                    padding-left: 60px;
                    border: none;
                    li{
                        &.active{
                            a{
                                border: none;
                                color: $color-06;
                            }
                        }
                        a{
                            height: 42px;
                            line-height: 42px;
                            color: $color-02;
                            padding: 0 15px;
                            font-size: 16px;
                            &:hover{
                                background: none;
                                border: none;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }

        //收入、支出、总金额
        .tribe-finance{
            margin-top: 5px;
            ul{
                li{
                    float: left;
                    width: 223px;
                    height: 70px;
                    border-radius: 4px;
                    padding-left: 16px;
                    padding-top: 13px;
                    .tribe-finance-num{
                        font-size: 16px;
                        color: $color-ffffff;
                        margin-bottom: 0;
                        padding-bottom: 0;
                    }
                    .tribe-finance-name{
                        font-size: 16px;
                        color: $color-ffffff;
                    }
                    &.tribe-finance-income{
                        background: $color-52C1F5;

                    }
                    &.tribe-finance-expend{
                        background: $color-07;
                        margin: 0 10px;
                    }
                    &.tribe-finance-amount{
                        background: $color-F86767;
                    }
                }
            }
        }

        //浏览数量
        .tribe-artWork{
            ul{
                li{
                    float: left;
                    width: 223px;
                    height: 190px;
                    border-radius: 4px;
                    margin-top: 10px;
                    border: 1px solid $color-b4b4b4;
                    padding-top: 18px;
                    background: $color-ffffff;
                    .tribe-artWorkName{
                        font-size: 16px;
                        padding-left: 16px;
                        height: 60px;
                        margin-bottom: 0;
                        margin-right: 20px;
                    }
                    .tribe-artWorkNum{
                        text-align: center;
                        font-size: 36px;
                        width: 100%;
                        padding-bottom: 10px;
                        margin-top: 0;
                    }
                    .tribe-artWorkToday{
                        text-align: center;
                        font-size: 14px;
                    }
                    .tribe-artWorkNameBg1,
                    .tribe-artWorkNameBg2,
                    .tribe-artWorkNameBg3{
                        position: relative;
                    }
                    .tribe-artWorkNameBg1{
                        &:after{
                            position: absolute;
                            content: "";
                            top: 0;
                            right: 0;
                            background: url("../../../images/pc/icon/icon-personal-artwork1.png") no-repeat;
                            width: 40px;
                            height: 40px;
                        }
                    }
                    .tribe-artWorkNameBg2{
                        &:after{
                            position: absolute;
                            content: "";
                            top: 0;
                            right: 0;
                            background: url("../../../images/pc/icon/icon-personal-artwork2.png") no-repeat;
                            width: 28px;
                            height: 40px;
                        }
                    }
                    .tribe-artWorkNameBg3{
                        &:after{
                            position: absolute;
                            content: "";
                            top: 0;
                            right: 0;
                            background: url("../../../images/pc/icon/icon-personal-artwork3.png") no-repeat;
                            width: 33px;
                            height: 40px;
                        }
                    }
                }
            }
        }

        //天气、评价、充值提现
        .tribe-perInfo{
            margin-top: 10px;
            .tribe-weather,.tribe-evaluate,.tribe-money{
                float: left;
                height: 146px;
            }
            .tribe-weather,.tribe-evaluate{
                border: 1px solid $color-d9d9d9;
                border-radius: 4px;
                background: $color-ffffff;
            }
            .tribe-weather{
                width: 223px;
                img{
                    float: left;
                }
                .tribe-weather-info{
                    width: 109px;
                    float: left;
                    padding-top: 15px;
                    text-align: center;
                    p{
                        width: 100%;
                        overflow: hidden;
                        &.tribe-f1{
                            font-size: 16px;
                        }
                        &.tribe-f2{
                            font-size: 14px;
                        }
                    }
                }
            }
            .tribe-evaluate{
                width: 270px;
                margin: 0 10px;
                padding-top: 8px;
                p{
                    margin-bottom: 0px;
                    padding-left: 40px;
                    &.tribe-evaluate-desc{
                        margin-top: 10px;
                        font-size: 16px;
                    }
                    &.tribe-evaluate-start{
                        padding-top: 5px;
                        span{
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            margin-right: 5px;
                            background: url("../../../images/pc/icon/icon-stars-gray.png");
                            &.yellow{
                                background: url("../../../images/pc/icon/icon-stars-yellow.png");
                            }
                        }
                    }
                }
            }
            .tribe-money{
                width: 177px;
                .tribe-recharge,.tribe-withdrawal{
                    a{
                        display: inline-block;
                        width: 100%;
                        height: 68px;
                        line-height: 68px;
                        font-size: 16px;
                        border-radius: 4px;
                        padding-left: 100px;
                        color: $color-ffffff;
                    }
                }
                .tribe-recharge{
                    a{
                        background: $color-07;
                        position: relative;
                        &:before{
                             content: "";
                             position: absolute;
                             top:20px;
                             left: 45px;
                             background: url("../../../images/pc/icon/icon-tribe-recharge.png") no-repeat;
                             width: 30px;
                             height: 30px;
                         }
                    }
                }
                .tribe-withdrawal{
                    margin-top: 10px;
                    a{
                        background: $color-52C1F5;
                        position: relative;
                        &:before{
                            content: "";
                            position: absolute;
                            top:20px;
                            left: 45px;
                            background: url("../../../images/pc/icon/icon-tribe-withdrawal.png") no-repeat;
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
            }
        }

        //作品数量
        .tribe-artWorkNum{
            margin-top: 10px;
            ul{
                li{
                    float: left;
                    width: 165px;
                    height: 105px;
                    border: 1px solid $color-d9d9d9;
                    background: $color-ffffff;
                    position: relative;
                    border-radius: 4px;
                    &.tribe-artWorkNum1,
                    &.tribe-artWorkNum2,
                    &.tribe-artWorkNum3,
                    &.tribe-artWorkNum4{
                        &:after{
                            content: "";
                            position: absolute;
                            right: 0px;
                            top: 0;
                            z-index: 0;
                            height: 103px;
                            width: 108px;
                        }
                        a{
                            display: inline-block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 100;
                        }
                    }
                    &.tribe-artWorkNum1{
                        margin-right: 10px;
                        color: $color-07;
                        &:after{
                            background: url("../../../images/pc/icon/icon-artWork-img.png") no-repeat;
                        }
                    }
                    &.tribe-artWorkNum2{
                        color: $color-52C1F5;
                        &:after{
                            width: 108px;
                            background: url("../../../images/pc/icon/icon-artWork-video.png") no-repeat;
                        }
                    }
                    &.tribe-artWorkNum3{
                        color: $color-F86767;
                        margin: 0 10px;
                        &:after{
                            width: 108px;
                            background: url("../../../images/pc/icon/icon-artWork-audio.png") no-repeat;
                        }
                    }
                    &.tribe-artWorkNum4{
                        color: $color-02;
                        &:after{
                            width: 108px;
                            background: url("../../../images/pc/icon/icon-artWork-text.png") no-repeat;
                        }
                    }
                    .tribe-artWorkNumP1{
                        font-size: 20px;
                        margin-bottom: 0;
                        position: absolute;
                        z-index: 1;
                        height: 25px;
                        top: 30px;
                        left: 16px;
                        width: 75px;
                        overflow: hidden;
                    }
                    .tribe-artWorkNumP2{
                        font-size: 18px;
                        position: absolute;
                        z-index: 1;
                        top: 55px;
                        left: 16px;
                        height: 25px;
                        width: 60px;
                        overflow: hidden;
                    }
                }
            }
        }
    }

    .per-fans{
        min-height: 1105px;
        ul{
            margin-left: -60px;
            li{
                width: 190px;
                height: 244px;
                float: left;
                margin-top: 30px;
                background: $color-ffffff;
                margin-left: 60px;
                &.mlmr60{
                    margin-left: 60px;
                    margin-right: 60px;
                }

                .per-fansNum{
                    font-size: 18px;
                    padding: 10px;
                    height: 14px;
                    .per-fansNum-l{
                        margin-bottom: 0;
                        width: 50%;
                        float: left;
                        height: 14px;
                        line-height: 14px;
                        position: relative;
                        padding-left: 20px;
                        overflow: hidden;
                        &:before{
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 13px;
                            height: 12px;
                            background: url("../../../images/pc/icon/icon-per-attention.png") no-repeat;
                        }

                    }
                    .per-fansNum-r{
                        margin-bottom: 0;
                        width: auto;
                        max-width: 50%;
                        float: right;
                        height: 14px;
                        line-height: 14px;
                        position: relative;
                        padding-left: 20px;
                        overflow: hidden;
                        font-size: 14px;
                        &:before{
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 16px;
                            height: 14px;
                            background: url("../../../images/pc/icon/icon-per-fans.png") no-repeat;
                        }
                    }
                }
                .per-fansImg{
                    width: 100px;
                    height: 100px;
                    margin: 15px auto 0 auto;
                    img{
                        border-radius: 50%;
                        width: 100px;
                        height: 100px;
                    }
                }
                .per-fansName{
                    padding: 3px 10px;
                    text-align: center;
                    .per-fansName-1{
                        text-align: center;
                        color: $color-02;
                        font-size: 14px;
                        height: 20px;
                        overflow: hidden;
                        margin: 15px 0 10px 0;
                        a{
                            color: $color-02;
                            &:hover{
                                @extend .extend-aline;
                            }
                        }
                    }
                    .per-fansName-2{
                        position: relative;
                        margin-bottom: 0;
                        display: inline-block;
                        padding-left: 17px;
                        height: 16px;
                        line-height: 16px;
                        overflow: hidden;
                        font-size: 12px;
                        &:before{
                            position: absolute;
                            content: "";
                            top:1px;
                            left: 0;
                            background: url("../../../images/pc/icon/icon-per-site.png") no-repeat;
                            width: 12px;
                            height: 15px;
                        }
                    }
                }
                .per-fansBtn,.per-fansBtn-already{
                    width: 100%;
                    height: 34px;
                    line-height: 34px;
                    font-size: 14px;
                    text-align: center;
                    margin-top: 3px;
                    a{
                        width: 100%;
                        display: inline-block;
                    }

                }
                .per-fansBtn{
                    background: $color-07;
                    a{
                        color: $color-02;
                        &:hover{
                            color: $color-ffffff;
                        }
                    }
                }
                .per-fansBtn-already{
                    background: $color-03;
                    a{
                        color: $color-ffffff;
                        &:hover{
                            color: $color-02;
                        }
                    }
                }
                &.per-fans-hover,&:hover{
                    @extend .extend-box-shadow;
                }
            }
        }
    }
    #v1-1-per-fans{
        ul{
            margin-left: -12px;
            li{
                margin-right: 12px;
                margin-left: 0px;
                margin-top: 15px;
            }
        }
    }
}
.more-img-tit{
    height: 100px;
    background: $color-ffffff;
    ul{
        width: 1000px;
        margin: 0 auto;
        li{
            float: left;
            width: 90px;
            text-align: center;
            height: 70px;
            line-height: 70px;
            margin: 15px 70px 15px 0;
            font-size: 16px;
            a{
                color: $color-02;
                display: inline-block;
                width: 100%;
                height: 100%;
            }
            &:hover{
                border-bottom: 4px solid $color-07;
            }
            &.more-img-tit-hover{
                border-bottom: 4px solid $color-07;
                a{
                    color: $color-07;
                }
            }
        }
    }
}


//账号设置
#per-settings{
    width: 1000px;
    margin: 30px auto 100px auto;
    padding-bottom: 30px;
    background: $color-ffffff;
    @extend .extend-box-shadow;
    .per-setLine{
        height: 1px;
        overflow: hidden;
        border-bottom: 1px solid $color-04;
    }
    .per-setLine-dashed{
        height: 1px;
        overflow: hidden;
        border-bottom: 1px dashed $color-03;
    }
    .per-setTit{
        height: 90px;
        line-height: 90px;
        font-size: 22px;
        text-align: center;
        border-bottom: 1px solid $color-04;
    }
    .per-setEdit,.per-set-up{
        color: $color-03;
        a{
            position: relative;
            color: $color-03;
            display: inline-block;
            padding-right: 22px;
            &:before{
                content: "";
                position: absolute;
            }
        }
    }
    .per-setEdit{
        font-size: 14px;
        a{
            &:before{
                top: 33px;
                right:0;
                background: url("../../../images/pc/icon/icon-set-down.png") no-repeat;
                width: 13px;
                height: 14px;
            }
        }
    }
    .per-set-up{
        a{
            &:before{
                top: 33px;
                right:0;
                background: url("../../../images/pc/icon/icon-set-up.png") no-repeat;
                width: 13px;
                height: 13px;
            }
        }
    }

    .per-setItem{
        padding: 0 50px;
        font-size: 16px;
        .per-itemTit{
            height: 80px;
            line-height: 80px;
            ul{
                li{
                    &.ml80{
                        margin-left: 80px;
                    }
                    .per-set-wx, .per-set-qq, .per-set-wb{
                        display: inline-block;
                        margin: 30px 30px 0 0;
                    }
                    .per-set-wx{
                        background: url("../../../images/pc/icon/icon-set-wx.png") no-repeat;
                        width: 30px;
                        height: 25px;
                    }
                    .per-set-qq{
                        background: url("../../../images/pc/icon/icon-set-qq.png") no-repeat;
                        width: 24px;
                        height: 25px;
                    }
                    .per-set-wb{
                        background: url("../../../images/pc/icon/icon-set-wb.png") no-repeat;
                        width: 31px;
                        height: 25px;
                    }
                }
            }
        }
        .per-itemCon{
            padding:40px 0 0 140px;
            .per-itemGroup{
                #sexType{
                    margin-top: 6px;
                }
                .per-itemGroup-icon{
                    padding-top: 15px;
                    width: 80px;
                }
                .per-radio-inline{
                    padding-left: 0;
                    margin-right: 10px;
                    input[type=radio]{
                        margin-top: 10px;
                    }
                    .iradio-grey-20{
                        margin-right: 10px;
                    }
                }
                .per-payPwd{
                    width: 55px;
                    height: 50px;
                    line-height: 50px;
                    float: left;
                    padding:0 0 0 12px;
                    margin-right: 20px;
                }
            }
            .per-set-label{
                font-size: 14px;
                font-weight: normal;
                height: 50px;
                line-height: 50px;
                padding-right: 0;
                padding-top: 0;
                width: 145px;
            }
            .per-set-control{
                font-size: 16px;
                color: $color-03;
                height: 50px;
                line-height: 50px;
            }
            .per-setControlMsg{
                clear: both;
                padding-left: 160px;
                padding-top: 15px;
                margin-bottom: 0;
                color: $color-07;
                font-size: 14px;
            }
            .per-set-textarea{
                font-size: 16px;
                color: $color-03;
                height: 170px;
                line-height: 25px;
            }
            .per-img-border{
                @extend .extend-box-shadow;
                background: $color-f8f8f8;
                padding: 5px;
                width: 180px;
                height: 180px;
            }
            .per-input-file{
                width: 180px;
                height: 180px;
                display: block;
                position: relative;
                z-index: 0;
                border: 1px solid $color-bfbfbf;
                &:before{
                    position: absolute;
                    top:47px;
                    left: 66px;
                    content: "";
                    background: url("../../../images/pc/icon/icon-set-addfile.png");
                    width: 49px;
                    height: 49px;
                }
                p{
                    width: 100%;
                    position: absolute;
                    top:0;
                    left: 0;
                    text-align: center;
                    color: $color-bfbfbf;
                    font-size: 14px;
                    padding-top: 118px;
                }
                input{
                    position: absolute;
                    top:0;
                    left: 0;
                    z-index: 2;
                    width: 180px;
                    height: 180px;
                    opacity: 0;
                    filter:alpha(opacity=0);
                    -moz-opacity:0;
                    -khtml-opacity: 0;
                    opacity: 0;
                    cursor: pointer;
                }
            }
            .lh80{
                line-height: 80px;
            }
        }
    }
    .per-hide{
        display: none;
    }
}

//发布作品
#per-publish{
    padding: 0 16px;
    width: 1000px;
    margin:0 auto;
    .per-pub-artMenu{
        padding-bottom: 28px;
        ul{
            li{
                display: inline-block;
                padding-right: 60px;
                a{
                    font-size: 18px;
                    color: $color-02;

                }
                a:hover,&.per-pub-artMenu-hover a{
                     color: $color-07;
                 }
            }
        }
    }
    .per-pub-choose{
        .per-pubGroup{
            margin: 0;
        }
        .per-pub-picColl{
            font-size: 14px;
            width: 126px;
            text-align: left;
            margin: 0;
            padding: 0;
            font-weight: normal;
            height: 50px;
            line-height: 50px;
        }
        .per-pub-select{
            height: 30px;
            line-height:30px;
            width: 135px;
            margin-top: 10px;
            padding: 4px 12px;
        }
        .per-pub-addPicColl{
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            a{
                color: $color-06;
            }
        }
    }
    .per-pub-picBox{
        margin: 30px 0 30px 0;
        border: 1px dashed $color-aaaaaa;
        ul{
            margin-left: 12px;
            margin-bottom: 20px;
            li{
                float: left;
                width: 200px;
                height: 260px;
                margin: 30px 18px 7px 18px;
                &.per-pub-add{
                    background: $color-ffffff;
                    border: 1px dashed $color-aaaaaa;
                    text-align: center;
                    p{
                        &.per-pub-addIcon{
                            position: relative;
                            width: 65px;
                            height: 65px;
                            margin: 75px auto 0 auto;
                            input[type=file]{
                                position: absolute;
                                top:0;
                                left: 0;
                                z-index: 2;
                                width: 65px;
                                height: 65px;
                                cursor: pointer;
                                opacity: 0;
                                z-index: 2;
                                filter:alpha(opacity=0);
                                -moz-opacity:0;
                                -khtml-opacity: 0;
                                opacity: 0;
                            }
                            a{
                                display: inline-block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top:0;
                                left: 0;
                                z-index: 1;
                            }
                            &:before{
                                content: "";
                                position: absolute;
                                top:0;
                                left: 0;
                                z-index: 0;
                                background: url("../../../images/pc/icon/icon-pub-add.png");
                                width: 65px;
                                height: 65px;
                            }
                        }
                        &.per-pub-addSC{
                            font-size: 16px;
                            font-weight: bolder;
                            color: $color-9a9a9a;
                            padding: 20px 0 0 0;
                        }
                        &.per-pub-addZS,&.per-pub-addDX{
                            font-size: 14px;
                            color: $color-9a9a9a;
                            line-height: 20px;
                            margin: 0;
                        }
                    }
                }
                .per-pub-img{
                    height: 200px;
                    width: 200px;
                    overflow: hidden;
                    background: $color-ffffff;
                    &:hover{
                        .per-pub-edit{
                            display: block;
                        }
                    }
                    img{
                        max-width: 200px;
                        max-height: 200px;
                        cursor: pointer;
                    }
                    position: relative;
                }
                .per-pub-noImg{
                    height: 200px;
                    width: 200px;
                    background: $color-ffffff;
                    border:  1px solid $color-9a9a9a;
                    .per-pub-progress{
                        width: 180px;
                        height: 18px;
                        border: 3px solid $color-07;
                        border-radius: 10px;
                        margin: 90px auto 0 auto;
                        padding: 0 3px;
                        span{
                            display: inline-block;
                            height: 6px;
                            background: $color-07;
                            border-radius: 6px;
                            margin:3px 0;
                        }
                    }
                }
                .per-pub-edit{
                    //border: 1px solid $color-07;
                    height: 57px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    //background: $color-ffffff;
                    p{
                        float: left;
                        width: 50%;
                        line-height: 57px;
                        a{
                            display: block;
                            width: 100%;
                        }
                        &.per-pub-editFM{
                            padding-left: 12px;
                            a{
                                color: $color-07;
                                position: relative;
                                &:after{
                                    position: absolute;
                                    top:10px;
                                    right: 6px;
                                    content: "";
                                    background: url("../../../images/pc/icon/icon-pub-fm.png") no-repeat;
                                    width: 36px;
                                    height: 36px;
                                }
                            }
                        }
                        &.per-pub-editDel{
                            float: right;
                            padding-right: 12px;
                            text-align: right;
                            width: 50px;
                            a{
                                color: $color-9a9a9a;
                                position: relative;
                                &:after{
                                    content: "";
                                    position: absolute;
                                    left: 6px;
                                    top: 10px;
                                    background: url("../../../images/pc/icon/per-album-del-1.png") no-repeat;
                                    width: 25px;
                                    height: 25px;
                                }
                            }
                        }
                    }
                }
                .per-pub-tit{
                    height: 50px;
                    border: 1px solid $color-9a9a9a;
                    margin-top: 10px;
                    font-size: 14px;
                    color: $color-9a9a9a;
                    text-align: center;
                    line-height: 50px;
                    input{
                        width: 100%;
                        height: 100%;
                        border: none;
                        background: none;
                        text-align: center;
                    }
                    a{
                        color: $color-9a9a9a;
                        &:hover{
                            @extend .extend-aline;
                        }
                    }
                }
            }
        }
    }
    .pub-file{
        height: 50px;
        line-height: 50px;
        position: relative;
        input[type=file]{
            height: 50px;
            width: 150px;
            cursor: pointer;
            position: absolute;
            top:0;
            left: 0;
            opacity: 0;
            z-index: 2;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;

        }
        .zcbl-form-pBlue{
            cursor: pointer;
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
            color: $color-06;
            font-size: 14px;
            a{
                color: $color-06;
                &:hover{
                    @extend .extend-aline;
                }
            }
        }
    }
    .pub-file-img{
        height: 50px;
        width: 50px;
        position: relative;
        background: $color-ffffff;
        border:1px solid $color-e5e5e5;
        border-radius: 5px;
        img{
            border-radius: 5px;
        }
        .pub-file-imgDel{
            position: absolute;
            top:-5px;
            right: -7px;
            background: url("../../../images/pc/icon/icon-pub-delImg.png");
            width: 18px;
            height: 18px;
            a{
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .per-pub-videoUpload{
        height: 480px;
        border: 1px dashed $color-aaaaaa;
        .per-pub-vieroQR{
            height: 40px;
            text-align: right;
            line-height: 40px;
            padding-right: 15px;
            font-size: 14px;
            a{
                color: $color-06;
                &:hover{
                    @extend .extend-aline;
                }
            }
        }
        .per-pub-videoBox{
            margin: 0 auto;
            width: 500px;
            height: 400px;
            background: $color-ffffff;
            border: 1px dashed $color-aaaaaa;
            position: relative;
            &:hover{
                .per-videoImg-edit{
                    display: block;
                }
            }
            img{
                max-width: 525px;
                max-height: 403px;
                margin: -1px 0 0 -1px;
                border: 1px solid $color-07;
            }
            .per-videoImg-edit{
                width: 100%;
                height: 57px;
                position: absolute;
                display: none;
                top: 0;
                left: 0;
                p{
                    float: left;
                    width: 50%;
                    line-height: 57px;
                    a{
                        display: block;
                        width: 100%;
                    }
                    &.per-pub-editFM{
                        padding-left: 12px;
                        a{
                            color: $color-07;
                            position: relative;
                            &:after{
                                position: absolute;
                                top:10px;
                                right: 6px;
                                content: "";
                                background: url("../../../images/pc/icon/icon-pub-video.png") no-repeat;
                                width: 36px;
                                height: 36px;
                            }
                        }
                    }
                    &.per-pub-editDel{
                        padding-right: 12px;
                        text-align: right;
                        float: right;
                        width: 50px;
                        a{
                            color: $color-9a9a9a;
                            position: relative;
                            &:after{
                                content: "";
                                position: absolute;
                                left: 6px;
                                top: 10px;
                                background: url("../../../images/pc/icon/per-album-del-1.png") no-repeat;
                                width: 25px;
                                height: 25px;
                            }
                        }
                    }
                }
            }
            .per-pub-addVideoIcon{
                position: relative;
                width: 65px;
                height: 65px;
                margin: 130px auto 0 auto;
                cursor: pointer;
                input[type=file]{
                    position: absolute;
                    top:0;
                    left: 0;
                    z-index: 2;
                    cursor: pointer;
                    width: 65px;
                    height: 65px;
                    opacity: 0;
                    filter:alpha(opacity=0);
                    -moz-opacity:0;
                    -khtml-opacity: 0;
                    opacity: 0;
                }
                &:after{
                    content: "";
                    position: absolute;
                    top:0;
                    left: 0;
                    background: url("../../../images/pc/icon/icon-pub-add.png");
                    width: 65px;
                    height: 65px;
                }
            }
            .per-pub-addVideoSC{
                font-size: 16px;
                text-align: center;
                font-weight: 500;
                margin-top: 22px;
                color: $color-9a9a9a;
            }
            .per-pub-addVideoTK{
                text-align: center;
                font-size: 12px;
                line-height: 22px;
                color: $color-9a9a9a;
                margin-bottom: 0;
            }
        }
    }
    .per-setControlMsg{
        clear: both;
        padding-left: 115px;
        padding-top: 15px;
        margin-bottom: 0;
        color: $color-07;
        font-size: 14px;
    }
}

//相册详细
#per-album{
    .per-album-tit{
        .per-album-titL{
            width: 50%;
            float: left;
            font-size: 20px;
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
            a{
                display: inline-block;
                position: relative;
                margin-left: 10px;
                &:after{
                    content: "";
                    position: absolute;
                    top:17px;
                    left: 0;
                    background: url("../../../images/pc/icon/icon-index-publish-1.png");
                    height: 19px;
                    width: 20px;
                }
            }
            .zcbl-album-control{
                height: 50px;
                width: 490px;
            }
        }
        .per-album-titR{
            width: 50%;
            float: right;
            padding-right: 10px;
        }
    }
    .per-album-con{
        margin-top: 20px;
        ul{
            li{
                width: 250px;
                height: 284px;
                float: left;
                padding-top: 10px;
                margin-bottom: 5px;
                &:hover{
                    background: $color-ffffff;
                    @extend .extend-box-shadow;
                }
                .per-album-imgBox{
                    width: 233px;
                    height: 232px;
                    padding-top: 1px;
                    padding-left: 1px;
                    background: $color-02;
                    margin: 0 auto;
                    position: relative;
                    &:hover{
                        .per-album-imgEdit{
                            display: block;
                        }
                    }
                    .per-album-imgEdit{
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        .per-album-imgEditFM{
                            width: 50%;
                            float: left;
                            width: 120px;
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                            background: $color-02;
                            color: $color-ffffff;
                            margin: 8px 0 0 5px;
                            font-size: 18px;
                            font-weight: 500;
                            a{
                                color: $color-ffffff;
                                @extend  .extend-aline;
                            }
                        }
                        .per-album-imgEditDel{
                            width: 40%;
                            float: right;
                            text-align: right;
                            a{
                                display: inline-block;
                                width: 34px;
                                height: 34px;
                                position: relative;
                                margin: 8px 14px 0 0;
                                &:after{
                                    position: absolute;
                                    content: "";
                                    left: 0;
                                    top:0;
                                    background: url("../../../images/pc/icon/per-album-del-1.png") no-repeat;
                                    width: 25px;
                                    height: 25px;
                                }
                            }
                        }
                    }
                }
                .moreVideo{
                    position: relative;
                    a{
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                    }
                    &:before{
                        content: "";
                        top: 66px;
                        left: 65px;
                        position: absolute;
                        background: url("../../../images/pc/icon/icon-more-video.png") no-repeat;
                        width: 108px;
                        height: 83px;
                    }
                }
                .moreAudio{
                    position: relative;
                    a{
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                    }
                    &:before{
                        content: "";
                        top: 60px;
                        left: 67px;
                        position: absolute;
                        background: url("../../../images/pc/icon/icon-more-audio.png") no-repeat;
                        width: 102px;
                        height: 102px;
                    }
                }
                .moreText{
                    position: relative;
                    a{
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                    }
                    &:before{
                        content: "";
                        top: 56px;
                        left: 78px;
                        position: absolute;
                        background: url("../../../images/pc/icon/icon-more-text.png") no-repeat;
                        width: 92px;
                        height: 98px;
                    }
                }
                .moreImg{
                    position: relative;
                    a{
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                    }
                    &:before{
                        content: "";
                        top: 66px;
                        left: 65px;
                        position: absolute;
                        background: url("../../../images/pc/icon/icon-more-img.png") no-repeat;
                        width: 115px;
                        height: 100px;
                    }
                }

                .per-album-titBox{
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    text-align: center;
                    a{
                        color: $color-02;
                        &:hover{
                            @extend .extend-aline;
                        }
                    }
                }
            }
        }
    }
}

//遮罩
#per-view-popup{
    width: 100%;
    background: rgba(0,0,0,0.5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top:0;
    z-index: 1000;
}

//编辑查看作品
.per-view-box{
    width: 1000px;
    background: $color-ffffff;
    margin: -20px auto 10px auto;
    padding: 0 10px 40px 10px;
    height: auto;
    .per-view-user{
        .per-view-uerImg{
            position: relative;
            width: 120px;
            float: left;
            height: 100px;
            img{
                border: 2px solid $color-ffffff;
                border-radius: 50%;
                position: absolute;
                top: -17px;
            }
        }
        .per-view-userInfo{
            float: left;
            width: 860px;
            padding: 23px 0 0 0;
            p{
                margin: 0;
                font-size: 14px;
                height: 24px;
                overflow: hidden;
                width: 600px;
                a{
                    color: $color-02;
                }
                &.per-site{
                    font-size: 12px;
                    position: relative;
                    padding-left: 18px;
                    line-height: 25px;
                    &:before{
                        content: "";
                        position: absolute;
                        background: url("../../../images/pc/icon/icon-per-site.png") no-repeat;
                        width: 12px;
                        height: 15px;
                        top:5px;
                        left: 0;
                    }
                }
            }
        }
    }
    .per-Slide{
        width:980px;
        margin:0 auto 20px auto;
        #mainphoto {
            cursor:pointer;
            display:block;
            position: absolute;
            left: 0;
            top:0;
            z-index: 0;
        }
        #mainbody {
            width:980px;
            height: 550px;
            margin:23px 0;
            position: relative;
            .picLeft,.picRight{
                filter:alpha(opacity=0.5);
                -moz-opacity:0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
                &:hover{
                    filter:alpha(opacity=1);
                    -moz-opacity:1;
                    -khtml-opacity: 1;
                    opacity: 1;
                }
                cursor: pointer;
                position: absolute;
                top:50%;
                width: 100px;
                height: 100px;
                cursor: pointer;
                &:after{
                    content: "";
                    position: absolute;
                    top:25px;
                    width: 24px;
                    height: 43px;
                }
            }
            .picLeft{
                left: 0;
                &:after{
                    left: 13px;
                    background: url("../../../images/pc/icon/icon-left.png");
                }
            }
            .picRight{
                right: 0;
                &:after{
                    right: 13px;
                    background: url("../../../images/pc/icon/icon-right.png");
                }
            }
        }
        .per-goleft,.per-goright{
            float:left;
            height: 140px;
            width: 58px;
            background: $color-04;
            margin-top: 7px;
            cursor: pointer;
            position: relative;
            &:hover{
                background: $color-03;
            }
            &:after{
                content: "";
                position: absolute;
                width: 24px;
                height: 43px;
                top: 48px;
            }
        }
        .per-goleft{
            &:after{
                background: url("../../../images/pc/icon/icon-left.png");
                left: 13px;
            }
        }
        .per-goright{
            &:after{
                background: url("../../../images/pc/icon/icon-right.png");
                right: 13px;
            }
        }
        #photos {
            width:862px;
            height:154px;
            line-height:140px;
            overflow:hidden;
            float: left;
        }
        #showArea{
            img{
                width: 140px;
                height: 140px;
                display:block;
                float:left;
                cursor:pointer;
                margin: 7px 15px 0 15px;
                &.hoverMax{
                    border: 2px solid #ffb30e;
                    width: 154px;
                    height: 154px;
                    margin-top: 0;
                    margin-left: 12px;
                    margin-right: 12px;
                }
            }
        }

    }
    .per-picedit{
        margin-top: 10px;
        padding-left: 120px;
        .zcbl-form-horizontal{
            .zcbl-control-label{
                text-align: right;
            }
        }
        .per-setControlMsg{
            clear: both;
            padding-left: 115px;
            padding-top: 15px;
            margin-bottom: 0;
            color: $color-07;
            font-size: 14px;
        }
    }
    .videoBody{
        width: 980px;
        max-height: 550px;
        position: relative;
        .videoIcon{
            width: 180px;
            height: 180px;
            position: absolute;
            top:50%;
            left: 50%;
            margin: -91px 0 0 -90px;
            a{
                display: inline-block;
                background: url("../../../images/pc/icon/icon-per-startVideo.png");
                width: 180px;
                height: 180px;
            }
        }
    }
    .audioBody{
        width: 980px;
        max-height: 550px;
        position: relative;
        .audioIcon{
            width: 180px;
            height: 180px;
            position: absolute;
            top:50%;
            left: 50%;
            margin: -91px 0 0 -90px;
            a{
                display: inline-block;
                background: url("../../../images/pc/icon/icon-per-startAudio.png");
                width: 183px;
                height: 183px;
            }
        }
        .audioSrc{
            width: 980px;
            position: absolute;
            bottom: 5px;
            left:0;
        }
    }
    .textBody{
        width: 980px;
        .zcbl-container{
            width: 740px;
            margin:  0 auto;
        }
        .zcbl-text-edit{
            width: 740px;
            margin: 0 auto;
            h1{
                p{
                    font-size: 20px;
                    margin: 0;
                    padding: 0;
                    &.zcbl-text-editL{
                        float: left;
                        width: 705px;
                        overflow: hidden;
                    }
                    &.zcbl-text-editR{
                        width: 33px;
                        overflow: hidden;
                        float: right;
                        a{
                            display: block;
                            background: url("../../../images/pc/icon/icon-per-edit2.png") no-repeat;
                            width: 33px;
                            height: 34px;
                        }
                    }
                }

                margin-bottom: 40px;
            }
            p{
                font-size: 16px;
                line-height: 35px;
            }

        }
        .zcbl-text-editTime{
            text-align: right;
            margin: 30px;
            font-size: 14px;
        }
    }
}

//充值
#per-recharge{
    width: 1000px;
    margin: 30px auto 35px auto;
    min-height: 500px;
    .per-recharge-tit{
        font-size: 18px;
        padding-left: 12px;
    }

    .zcbl-control-msg{
        padding-left: 115px;
        font-size: 14px;
        color: $color-07;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .zcbl-form-horizontal{
        .zcbl-form-group{
            padding-left: 40px;
            margin-bottom: 0px;
        }
    }
    .per-recharge-payType{
        padding-top: 10px;
        padding-left: 20px;
        .per-recharge-radio{
            input[type=radio]{
                margin-top: 17px;
            }
            img{
                margin-right: 30px;
            }
        }
    }

    .zcbl-form-horizontal .pl12{
        padding-left: 12px;
    }

    .zcbl-form-horizontal input.bgF{
        background: $color-ffffff;
    }

    .per-recharge-payList{
        background: $color-ffffff;
        border:  1px solid $color-acacac;
        border-bottom: none;
        margin-top: 30px;
        margin-bottom: 60px;
        ul{
            li{
                padding: 0 30px;
                height: 78px;
                border-bottom: 1px solid $color-acacac;
                .per-payList-tit{
                    font-size: 16px;
                    padding-top: 15px;
                }
                .per-payList-time{
                    color: $color-03;
                    font-size: 14px;
                }
                .per-payList-income,.per-payList-expend{
                    margin: 0;
                    padding: 0;
                    line-height: 78px;
                    font-size: 20px;
                    text-align: right;
                }
                .per-payList-expend{
                    color: $color-fb4444;
                }
            }
        }
    }

    .per-pay-password{
        font-size: 14px;
        padding-top: 20px;
        a{
            color: $color-02;
        }
        span{
            padding: 0 20px;
            a{
                color: $color-06;
            }
        }
    }
}

//付款详细
#per-payInfo{
    width: 1000px;
    margin: 30px auto 35px auto;
    .per-payInfo-order{
        padding: 0 20px;
        border-bottom: 1px solid $color-acacac;
        .per-payInfo-orderId,.per-payInfo-orderTime,.per-payInfo-orderTit,.per-payInfo-orderStatus{
            font-size: 16px;
            padding-bottom: 10px;
        }
        .per-payInfo-orderTime,.per-payInfo-orderStatus{
            font-size: 14px;
            text-align: right;
        }
        .per-payInfo-orderTit{
            color: $color-212121;
        }
        .per-payInfo-des{
            color: $color-90908f;
            font-size: 14px;
            padding-bottom: 15px;
        }
        .per-payInfo-orderZJ,.per-payInfo-orderSC{
            font-size: 14px;
            padding-bottom: 15px;
        }
        .per-payInfo-orderZJ{
            position: relative;
            padding-left: 25px;
            &:before{
                content: "";
                position: absolute;
                top:3px;
                left: 0;
                background: url("../../../images/pc/icon/icon-per-zjArt.png");
                width: 14px;
                height: 16px;
            }
        }
        .per-payInfo-orderSC{
            position: relative;
            padding-left: 25px;
            display: inline-block;
            float: right;
            color: $color-90908f;
            &:before{
                content: "";
                position: absolute;
                top:3px;
                left: 0;
                background: url("../../../images/pc/icon/icon-per-time.png");
                width: 16px;
                height: 17px;
            }
        }
    }
    .per-payInfo-amount{
        text-align: right;
        color: $color-07;
        font-size: 18px;
        padding-top: 25px;
        padding-bottom: 25px;
        span{
            display: inline-block;
            margin-left: 30px;
        }
    }
    .per-payInfo-type{
        height: 160px;
        background: $color-ffffff;
        padding: 20px 30px 0 30px;
        .per-recharge-tit{
            font-size: 18px;
        }
        .per-recharge-payType{
            padding-top: 10px;
            .per-recharge-radio{
                padding-left: 0;
                input.input-img{
                    margin-top: 19px;
                }
                img{
                    margin-right: 30px;
                }
                .account-balance{
                    color: $color-07;
                }
            }
        }
    }
}

//付款成功付款失败
#per-payResult{
    min-height: 700px;
    .per-payResultBox{
        height: 370px;
        background: $color-ffffff;
        text-align: center;
        .zcbl-pay-error{
            display: inline-block;
            height: 240px;
            margin: 0 auto;
            .zcbl-pay-errorIcon{
                padding-top: 150px;
                position: relative;
                text-align: left;
                font-size: 38px;
                color: $color-08;
                padding-left: 100px;
                &:before{
                    content: "";
                    left: 0;
                    top: 130px;
                    position: absolute;
                    background: url("../../../images/pc/icon/icon-per-error.png") no-repeat;
                    width: 74px;
                    height: 74px;
                }
            }
            .zcbl-pay-successIcon{
                padding-top: 130px;
                position: relative;
                text-align: left;
                font-size: 38px;
                color: $color-07;
                line-height: 74px;
                padding-left: 100px;
                &:before{
                    content: "";
                    left: 0;
                    top: 130px;
                    position: absolute;
                    background: url("../../../images/pc/icon/icon_recruitsuc.png") no-repeat;
                    width: 76px;
                    height: 74px;
                }
            }
            .zcbl-pay-msg1{
                color: $color-03;
                font-size: 16px;
                padding-top: 10px;
                margin-top: 30px;
            }
            .zcbl-pay-msg2{
                text-align: left;
                font-size: 14px;
                padding-top: 25px;
                text-align: center;
                a{
                    @extend .extend-aline;
                    &.zcbl-pay-hrefYellow{
                        color: $color-07;
                        margin-right: 33px;
                    }
                    &.zcbl-pay-hrefGray{
                        color: $color-02;
                    }
                }
            }
        }
    }
}

